import React, { Component } from 'react';
import { Form, Icon, Input, Button, Row, Col } from 'antd';
class Login extends Component {
  // 提交
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      // 如果err不为true则说明通过了前端的验证
      if (!err) {
        // 假设提交接口
        const data = JSON.stringify(values);
        window.sessionStorage.setItem('user', data);
        console.log(this.props);
        const { history } = this.props;
        // history.push事项历史记录中插入一条地址信息
        // history.replace 是替换当前历史记录中的地址信息
        history.replace('/', values);
      }
    });
  };
  // 渲染
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row>
        <Col span={12} offset={6}>
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator('username', {
                rules: [{ required: true, message: '请输入用户名!' }]
              })(
                <Input
                  prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="用户名"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码!' }]
              })(
                <Input
                  prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  type="password"
                  placeholder="密码"
                />
              )}
            </Form.Item>
            <Form.Item>
              <Button block type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    );
  }
}
// 高阶组件，创建一个表单实例
const Wrapped = Form.create({ name: 'normal_login' })(Login);
// 导出
export default Wrapped;
